<!--
 * @Author: 蔡亚风
 * @Date: 2022-06-17 16:23:15
 * @LastEditTime: 2022-06-29 17:00:46
 * @LastEditors: 蔡亚风
 * @Description: 
 * @FilePath: \prod\src\components\BigInput\index.vue
-->
<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'

const props = defineProps({
  submitCallback: {
    //确认回调
    type: Function,
    default: () => {},
  },
  val: {
    //原始数据 用于回显
    type: String,
  },
  maxlength: {
    //输入长度限制
    type: String || Number,
    default: 99,
  },
  filterInputData: {
    //输入过滤 以及是否为密码输入框
    type: Object,
    default: () => {
      return {
        isPassWord: false,
      }
    },
  },
})

const inputRef = ref(null) //组件输入框的实例
const inputVal = ref('') //组件输入框绑定的值
//监听回显数据变动 并赋值
watch(
  props.val,
  (newV) => {
    inputVal.value = props.val
  },
  {
    immediate: true,
  }
)

//密码输入框逻辑
const inputTypeVal = ref('text')
if (props.filterInputData.isPassWord) {
  inputTypeVal.value = 'password'
}
//密码输入框icon样式
const elIcon = computed(() => {
  return inputTypeVal.value === 'text' ? 'icon-yanjing-' : 'icon-biyanjing'
})
//点击密码输入框icon切换样式
const Iconclick = async () => {
  if (inputTypeVal.value === 'text') {
    inputTypeVal.value = 'password'
  } else {
    inputTypeVal.value = 'text'
  }
  await nextTick()
  //获取输入焦点
  inputRef.value.focus()
}
onMounted(() => {
  //组件加载完成后自动获取输入框焦点
  inputRef.value.focus()
})

//输入变动
const inputChange = () => {
  const {
    max = 999,
    isNum = false,
    isID = false,
    isToUpper = false,
    isSafe = false,
  } = props.filterInputData
  let elVal = inputVal.value
  let reg = '' //除去大部分特殊字符 只允许输入小部分特殊字符 全部英文 全部中文 全部数字
  if (isSafe) {
    reg = /[^\-_.:：#a-zA-Z0-9\u4e00-\u9fa5]/gi
  } else if (isNum) {
    //是否为纯数字
    reg = /[^0-9]/gi
  } else if (isID) {
    //只允许身份证号内允许的字段
    reg = /[^#0-9]/gi
  } else if (isToUpper) {
    //只允许输入英文和数字
    reg = /[^a-zA-Z0-9]/gi
  }
  if (reg) {
    elVal = elVal.replace(reg, '')
  }
  if (max) {
    //最大长度
    elVal = elVal.slice(0, max)
  }
  if (isID || isToUpper) {
    elVal = elVal.toUpperCase()
  }
  inputVal.value = elVal
}
</script>

<template>
  <div class="biginput">
    <!-- 输入模态框主体 -->
    <form action="javascript:return false;" class="biginput-form">
      <input
        ref="inputRef"
        v-model="inputVal"
        :type="inputTypeVal"
        autocomplete="off"
        :maxlength="maxlength"
        @keyup.enter="submitCallback(inputVal)"
        @input="inputChange"
      />
      <!-- 如果为密码输入类型则显示显隐icon -->
      <i
        v-if="props.filterInputData.isPassWord"
        :class="['iconfont ', elIcon]"
        @click="Iconclick()"
      >
      </i>
    </form>
    <!--浮层 -->
    <div class="biginput-mask" @click="submitCallback(inputVal)"></div>
  </div>
</template>

<style lang="less" scoped>
.biginput {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  &-form {
    width: 55%;
    height: 10%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    input {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 8px;
      font-size: 36px;
      color: #333;
      letter-spacing: 2px;
      padding: 0 60px 0 32px;
      font-weight: 600;
      outline: none;
    }
    i {
      position: absolute;
      right: 8px;
      top: 26px;
      font-size: 50px;
      color: #000;
    }
  }

  &-mask {
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
  }
}
</style>
